<template>
	<view class="coupon">
		<view class="detail">
			<view class="image-size">
				<u-image :src="list.image[0].file_path" shape="circle" width="100rpx" height="100rpx"></u-image>
			</view>
			<view class="coupon-title">{{ list.name ? list.name : 0 }}</view>
			<view class="coupon-ms">优惠金额： ￥{{list.fee ? list.fee : 0}}</view>
			<view class="coupon-ms">开始日期： {{ list.start_time ? list.start_time : '' }}</view>
			<view class="coupon-ms">截止日期： {{ list.end_time ? list.end_time : '' }}</view>
			<view class="btn" style="margin-top: 100upx;"
				v-if="list.code !== '出票中' && list.is_ticket !== '3' && list.status !== '4'" @click="geturl">立即使用</view>
			<view class="btn" style="margin-top: 100upx;" v-if="list.code == '出票中'">出票中...</view>
			<view class="btn" style="background-color: #DD6161;margin-top: 20upx;"
				v-if="list.is_ticket !== '3'  && list.status !== '4' && list.code !== '出票中'" @click="getReme">退款</view>
			<view class="btn" style="background-color: #DD6161;margin-top: 20upx;"
				v-if="list.is_ticket == '3' && list.status !== '4' && list.code !== '出票中'">退款中...</view>
			<view class="btn" style="background-color: #DD6161;margin-top: 20upx;"
				v-if="list.is_ticket == '3' && list.status == '4' && list.code !== '出票中'">已退款</view>
			<view style="padding-left: 35upx;padding-bottom: 50upx;">
				<view style="margin-top: 50upx;font-weight: bold;">使用说明： </view>
				<!-- <view style="margin-top: 30upx;">{{ data.by_know }}</view> -->
				<view style="padding: 3%;margin-bottom: 200upx;">
					<u-parse :html="list.by_know"></u-parse>
				</view>
			</view>
		</view>
		<view class="model-view" :style="showModal?'':'display:none;'">
			<view class="model-out-box">
				<view class="model-content">
					<canvas canvas-id="myQrcode" style="margin: 15px;"></canvas>
				</view>
				<image src="/static/close.png" class="wrong-img" @click="handleHideCodeClick" />
			</view>
		</view>
	</view>
</template>

<script>
	const qrCode = require('../../common/weapp-qrcode.js')
	export default {
		data() {
			return {
				code: '123456789',
				showModal: false,
				couponId: '',
				list: {},
				data: '',
				show: true,
				value: '',
				customStyle: {
					marginTop: '20px', // 注意驼峰命名，并且值必须用引号包括，因为这是对象
					backgroundColor: '#FFD103',
					color: '#000000'
				}
			}
		},
		onShareAppMessage(res) {
		    if (res.from === 'button') {// 来自页面内分享按钮
		      console.log(res.target)
		    }
		    return {
		      title: this.list.name,
			  imageUrl: this.list.image[0].file_path,
		      path: '/pages/index/index?couponId=' + this.couponId
		    }
		  },
		onLoad(e) {
			console.log(e)
			this.couponId = e.couponId
			this.data = e.useCoupon
		},
		mounted() {
			// this.handleShowCodeClick()
			// this.data = uni.getStorageSync('useCoupon')
			this.getTj()
			this.getfx()
			// console.log(this.data )
		},
		methods: {
			getfx () {
				this.$request('', '/api/app/coupon/getuserpasson', 'POST', {
					order_id: this.couponId
				}, {}).then(res => {
					
				})
			},
			getReme () {
				if (this.list.is_ticket == 2) {
					uni.showToast({
						title: '已使用不可退款',
						icon: 'error',
						duration: 2000
					})
				} else {
					this.$request('', '/api/app/huibendi/getopenapiordercoderefund', 'POST', {
						order_no: this.data
					}, {}).then(res => {
						uni.showToast({
							title: '申请成功',
							icon: 'success',
							duration: 2000
						})
						this.getTj()
					})
				}
			},
			initQrCode: function() {
				new qrCode('myQrcode', {
					text: this.code,
					width: 170,
					height: 170,
					colorDark: "#333333",
					colorLight: "#FFFFFF",
					correctLevel: qrCode.CorrectLevel.H
				})
			},
			handleShowCodeClick: function() {
				this.showModal = true
				this.$nextTick(function() {
					this.initQrCode()
				})
			},
			handleHideCodeClick: function() {
				this.showModal = false
			},
			geturl() {
				if (this.list.is_ticket == 3 && this.list.status == 4 && list.code !== '出票中') {
					uni.showToast({
						title: '退款中...',
						icon: 'error',
						duration: 2000
					})
				} else if (this.list.code == '出票中') {
					uni.showToast({
						title: '出票中...',
						icon: 'error',
						duration: 2000
					})
				} else {
					this.code = this.list.code
					this.handleShowCodeClick()
				}
			},
			getTj() {
				this.$request('', '/api/app/huibendi/getopenapivercodedetail', 'POST', {
					order_no: this.data
				}, {}).then(res => {
					this.list = res.data
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.model-view{
		position: fixed;
		top: 0;
		z-index: 1;
		width: 100%;
		height: 100%;
		display:flex;
		justify-content: center;
		background-color:rgba(0,0,0,0.4);
	}
	.model-out-box{
		width: 200px;
		height: 270px;
		margin-top: 45%;
		display:flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
	}
	.model-content{
		width: 200px;
		height: 200px;
		border-radius: 10rpx;
		background: #fff;
		display:flex;
		align-items: center;
		justify-content: center;
	}
	.wrong-img{
		width: 30px;
		height: 30px;
	}

	.title {
		text-align: center;
		font-weight: bold;
		padding-top: 40upx;
		padding-bottom: 20upx;
	}

	.input-styless {
		width: 80%;
		margin: 0 auto;
	}

	.coupon {
		width: 100%;
		height: 100vh;
		background: linear-gradient(180deg, #FFD103 0%, #F4B700 100%);
		padding-top: 200upx;
	}

	.detail {
		width: 95%;
		// height: 700upx;
		background-color: #FFFFFF;
		border-radius: 20upx;
		margin: 0 auto;
	}

	.image-size {
		width: 100%;
		display: flex;
		justify-content: center;
		position: relative;
		top: -45upx;
	}

	.coupon-title {
		font-size: 38upx;
		font-weight: bold;
		text-align: center;
	}

	.coupon-ms {
		width: 70%;
		text-align: left;
		font-size: 30upx;
		color: #999999;
		margin: 0 auto;
		margin-top: 30upx;
	}

	.btn {
		width: 90%;
		height: 76upx;
		background: #FFD103;
		border-radius: 38upx;
		line-height: 76upx;
		text-align: center;
		margin: 0 auto;
		// margin-top: 100upx;
	}
</style>
